<template>
  <el-card>
    <div class="header-bar">
      <span class="title">设备统计分析</span>
      <el-radio-group v-model="chartType" size="small" style="margin-right:10px;">
        <el-radio-button label="bar">柱状图</el-radio-button>
        <el-radio-button label="line">折线图</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="dateType" size="small" style="margin-right:10px;">
        <el-radio-button label="day">日</el-radio-button>
        <el-radio-button label="month">月</el-radio-button>
        <el-radio-button label="year">年</el-radio-button>
      </el-radio-group>
      <el-button type="primary" size="small" @click="exportExcel">导出Excel</el-button>
      <el-button size="small" @click="downloadImage">下载图表图片</el-button>
    </div>
    <v-chart ref="chartRef" :option="chartOption" autoresize style="height:420px;width:100%;" />
  </el-card>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'
import VChart from 'vue-echarts'
import { use } from "echarts/core";


// 控件状态
const chartType = ref('bar')
const dateType = ref('day')

// 设备模拟统计数据
const statDataMap = {
  day: {
    x: ['06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12'],
    y: [8, 12, 10, 9, 15, 13, 11]
  },
  month: {
    x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    y: [80, 100, 95, 110, 120, 140, 105, 130, 122, 90, 110, 138]
  },
  year: {
    x: ['2020', '2021', '2022', '2023', '2024'],
    y: [900, 1050, 1200, 1320, 1255]
  }
}

const chartOption = computed(() => {
  const x = statDataMap[dateType.value].x
  const y = statDataMap[dateType.value].y
  return {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: x },
    yAxis: { type: 'value' },
    series: [
      {
        name: '检测设备数',
        data: y,
        type: chartType.value,
        smooth: chartType.value === 'line'
      }
    ],
    grid: { left: 40, right: 20, bottom: 40, top: 50 }
  }
})

// 导出Excel
function exportExcel() {
  const data = [['时间', '检测设备数']]
  const x = statDataMap[dateType.value].x
  const y = statDataMap[dateType.value].y
  for (let i = 0; i < x.length; i++) {
    data.push([x[i], y[i]])
  }
  const ws = XLSX.utils.aoa_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '设备统计')
  XLSX.writeFile(wb, '设备统计分析_' + dateType.value + '.xlsx')
  ElMessage.success('已导出Excel')
}

// 下载图表图片
const chartRef = ref(null)
function downloadImage() {
  nextTick(() => {
    const chartInstance = chartRef.value?.chart
    if (!chartInstance) {
      ElMessage.error('图表实例未初始化')
      return
    }
    const imgData = chartInstance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' })
    const a = document.createElement('a')
    a.href = imgData
    a.download = '设备统计图.png'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    ElMessage.success('图表已下载')
  })
}


</script>

<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
}
</style>
